<template>
    <div class="suibianquba">
        <div class="shangpinlist-wrap clearfix">
            <div class="navlist fl">
                <div class="bdsousuo-wrap wraps">
                    <div class="bdsousuo">
                        <h3 class="titles">本站搜索</h3>
                        <div class="jgsousuo-wrap clearfix">
                            <form action="">
                               <ul class="gjz">
                                   <li class="keyword-wrap clearfix">
                                       <span class="key fl">关键字</span> <input type="text" v-model="gjdata.gjzw" name="keyword" class="keyword fl" autocomplete="off">
                                   </li>
                                   <li class="price-wrap clearfix">
                                       <span class="key fl">价格</span>
                                       <input type="text" class="pri fl" id="price1" v-model="gjdata.lowjg">
                                       <span class="fl lianjies">-</span>
                                       <input type="text" class="pri fl" id="price2" v-model="gjdata.upjg">
                                   </li>
                                  
                               </ul>
                                <div class="pri-submit">
                                       <button class="pri-btn" type="button" @click="guanjianzisou()"></button>
                                   </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="fenlei-wrap wraps">
                    <div class="fenlei">
                        <h3 class="titles">宝贝分类</h3>
                        <div class="fenleilist">
                            <div class="chakansuoyou">
                                <a href="">查看所有宝贝</a>
                            </div>
                            <ul class="fenleinav clearfix">
                                <li><a href="">按综合</a></li>
                                <li><a href="">按销量</a></li>
                                <li><a href="">按新品</a></li>
                                <li><a href="">按价格</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="paihang-wrap wraps">
                    <div class="paihang">
                        <h3 class="titles">宝贝排行榜</h3>
                        <div class="paihanglist">
                            <ul class="pl-ul clearfix">
                                <li class="active">销售量
                                    
                                </li>
                                <li>收藏数</li>
                            </ul>
                            <div class="ph-wrap">
                                <div class="xiaow clearfix">
                                    <div class="xw-l fl">
                                        <img src="../assets/img/ys/zhizhao.png" class="spimg" alt="">
                                    </div>
                                    <div class="xw-r fr">
                                        <p class="dec"><a href="" class="spname">sdadsdsdsdsdsadsds</a></p>
                                        <p class="shprice">
                                            <span class="rmb">￥</span>
                                            <span class="danjia">433.9</span>
                                        </p>
                                        <p class="sale">已收藏<span class="scshu">123456</span>笔</p>
                                    </div>
                                </div>       
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shangpinlist fr clearfix">
                <div class="tjhead clearfix">
                    <div class="tjnav-wrap">
                        <div class="tjnavw">
                            <div class="tjnav">
                                <ul class="tjnav-ul clearfix">
                                    <li class="suoyoufenlei"><a href="" class="syfl">所有分类</a><i class="syii">></i></li>
                                    <li class="suoyoushangpin">
                                        <div class="suoyoushangpin-wrap fl">
                                            <a href="" class="sysp">所有商品<i></i></a>
                                            <div class="suoyousplist-wrap">
                                                <ul class="syspulwrap">
                                                    <li  v-for="(item,key) in nav" :key="key" @mouseover="xinashifn(item)" @mouseout="yichu" class="actives"><a href="" class="daoyhanglist">{{item}}</a>
                                                   </li>
                                                    <ul class="xiaospyulan">
                                                        <li v-for="(witem,keym) in mswrap" :key="keym"><a href=""><span v-for="(mok,mokey) in mswrap[keym]" :key="mokey">{{mok}}</span></a></li>
                                                    </ul>
                                                </ul>
                                                <!-- <ul class="syspulwrap">
                                                    <li><a href="" class="daoyhanglist">裤子</a></li>
                                                    <li><a href="" class="daoyhanglist">衣服</a></li>
                                                    <li><a href="" class="daoyhanglist">鞋子</a></li>
                                                </ul>
                                                <ul class="syspulwrap">
                                                    <li><a href="" class="daoyhanglist">裤子</a></li>
                                                    <li><a href="" class="daoyhanglist">衣服</a></li>
                                                    <li><a href="" class="daoyhanglist">鞋子</a></li>
                                                </ul> -->
                                            </div>
                                        </div>
                                        <i class="syii">></i>
                                    </li>
                                    <li>
                                        <form action="">
                                            <div class="tjsearch-wrap"><input type="text" class="tjsearch" placeholder="在当前结果中搜索"><i class="tjsearch-btn"></i></div>
                                        </form>
                                    </li>
                                    <li class="tjresou">
                                        <span>本店热搜词：</span>
                                        <!-- <a href="">70</a>
                                        <a href="">开口笑</a>
                                        <a href="">匡威</a>
                                        <a href="">高帮</a> -->
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lingwainav-wrap">
                            <div class="lingwainav">
                                <span class="zonglan">总览：</span>
                                <a href="" class="zonglan-a" v-for="(ite,zkey) in nav" :key="zkey">{{ite}}</a>
                            </div>
                            <!-- <div class="pingpai">
                                <span class="pinpais">品牌：</span>
                                <a href="" class="pinpai-a">耐克</a>
                                <a href="" class="pinpai-a">阿迪</a>
                            </div> -->
                             <div class="shangpuinfos-wrap clearfix">
                                 <div class="fl"><span class="dianpuxinxis">店铺信息：</span></div>
                                 <div class="fl xingxiss"><span class="shangpuinfos">
                                       {{arr.spinfo}}
                                     </span></div>
                             </div>
                    </div>
                    </div>
                    
                </div>
                <div class="zonghenav-wrap clearfix">
                    <div class="zonghe fl">
                        <a href="javascript:;" class="zonghepaixu zonghe-a red" @click="zonghes">综合排序</a>
                        <a href="javascript:;" class="xiaoliang zonghe-a" @click="chacha($event)">销量<i class="xiaoliang-is xiaoliang-i"></i></a>
                        <!-- <a href="javascript:;" class="xinpings zonghe-a" @click="chacha($event)">新品<i class="xiaoliang-is xinping-i"></i></a> -->
                        <a href="javascript:;" class="shoucangs zonghe-a" @click="chacha($event)">收藏<i class="xiaoliang-is shoucang-i"></i></a>
                        <a href="javascript:;" class="jiages zonghe-as" @click="chachap($event)">价格<i class="price-up"></i><i class="price-down"></i></a>
                    </div>
                    <div class="price-chaxun">
                        <form action="">
                            <div class="pinput-wrap">
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="lowprice" maxlength="8" autocomplete="off" v-model="p1" @focus="xx">
                                </b>
                                <i class="jiange"></i>
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="highprice" maxlength="8" autocomplete="off" v-model="p2" @focus="xx">
                                </b>
                            </div>
                            <div class="qkqr">
                                <a href="javascript:;" class="cbtn" @click="qk">清空</a>
                                <a href="javascript:;" class="qrbtn" @click="qr">确定</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="spitems">
                    <router-view :nmsg="msg" :gjz="gj" :jgw="jgw" :zy="zy"></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
 <script>
 export default {
     props:['msg',"zy"],
     data(){
         return {
             id:"",
             arr:"",
             nav:"",
             navwarap:[],
             xianshifn:"",
             ms:"",
             mswrap:[],
             gjdata:{
                 gjzw:"",
                 lowjg:"",
                 upjg:""
             },
             gj:"",
             n1:0,
             jgw:{
                 up:false,
                 down:false,
                 moren:true,
                 jichu:"",
                 mup:"",
                 mdown:""
             },
             p1:"",
             p2:'',
             pld:true

         }
     },
     created(){
         this.id=this.$route.params.id
         console.log(this.id+"我在商铺主页")
         axios.post("/api/spzyc",{id:this.id}).then((data)=>{
             if(data.data){
                 this.arr=data.data[0]
                 this.nav=data.data[0].navname.split(',')
             }else{

             }
         })
     },
     methods:{
         zonghes(){
             this.gjdata.upjg=""
             this.gjdata.lowjg=""
             this.gjdata.gjzw=""
              this.gj=this.gjdata
             this.jgw.up=false
             this.jgw.down=false
             this.jgw.moren=true
             this.jgw.mup="",
             this.jgw.mdown=""
             this.n1=0
             this.p1=""
             this.p2=""
              var _this=this
             let zhwrap=document.getElementsByClassName('zonghe-a')
             let zhwraps=document.getElementsByClassName("zonghe-as")[0]
              for(var i=0;i<zhwrap.length;i++){
                 zhwrap[i].classList.remove('active')
              }
              zhwraps.classList.remove('downp')
                     zhwraps.classList.remove('upp')
                     zhwraps.classList.remove('active')
         },
         qr(){
             this.jgw.mup=this.p1
             this.jgw.mdown=this.p2
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         qk(){
             this.p1=""
             this.p2=""
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         sj(){
             var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="none"
         },
         xx(){
            var qkqr=document.getElementsByClassName('qkqr')[0]
             qkqr.style.display="block"
         },
         chacha(val){
             var _this=this
             let zhwrap=document.getElementsByClassName('zonghe-a')
             let zhwraps=document.getElementsByClassName("zonghe-as")[0]
             console.log(val.toElement.innerText)
             for(var i=0;i<zhwrap.length;i++){
                 zhwrap[i].classList.remove('active')
                 if(zhwrap[i].innerText==val.toElement.innerText){
                     _this.jgw.jichu=val.toElement.innerText
                     zhwraps.classList.remove('downp')
                     zhwraps.classList.remove('upp')
                     zhwraps.classList.remove('active')
                     _this.jgw.moren=true
                     _this.jgw.up=false
                     _this.jgw.down=false
                     _this.n1=0
                     zhwrap[i].classList.add('active')
                 }
             }

         },
         chachap(val){
            let zhwrap=document.getElementsByClassName('zonghe-a')
            let zhwraps=document.getElementsByClassName("zonghe-as")[0]
             var _this=this
             _this.jgw.jichu=""
             for(var i=0;i<zhwrap.length;i++){
                zhwrap[i].classList.remove('active')
             }
             if(val.toElement.innerText=="价格"){
                 this.n1++
                 if(this.n1==3){
                     this.n1=0
                 }
             }
             if(val.toElement.innerText=="价格"){
                         if(_this.n1==1){
                             zhwraps.classList.add('upp')
                             zhwraps.classList.add('active')
                             _this.jgw.moren=false
                             _this.jgw.up=true
                         }else if(_this.n1==2){
                             zhwraps.classList.remove('upp')
                             zhwraps.classList.add('downp')
                             _this.jgw.up=false
                             _this.jgw.down=true
                         }else{
                             if(zhwraps.className.indexOf('downp')>-1){
                                 zhwraps.classList.remove('downp')
                                 zhwraps.classList.remove('active')
                                 _this.jgw.moren=true
                                 _this.jgw.down=false
                             }else{
                                 zhwraps.classList.add('active')
                             }
                         }
                     }
         },
         guanjianzisou(){
             var _this=this
             if(this.gjdata.gjzw && this.gjdata.lowjg && this.gjdata.upjg){
                  this.gj=this.gjdata
             }
           
         },
         yichu(){
                 document.getElementsByClassName('xiaospyulan')[0].style.display="none"
         },
         xinashifn(val){
             document.getElementsByClassName('xiaospyulan')[0].innerHTML=""
             this.mswrap=[]
             axios.post("/api/xianshifn",{navs:val,spid:this.id}).then((data)=>{
                 if(data.data){
                     this.xianshifn=data.data
                     console.log(data.data)
                     for(var i=0;i<this.xianshifn.length;i++){
                         this.ms=this.xianshifn[i].miaoshutag.split(',')
                         this.mswrap.push(this.ms)
                         this.ms=''
                     }
                     console.log(this.mswrap)
                     document.getElementsByClassName('xiaospyulan')[0].style.display="block"
                 }else{

                 }
             })
         }
     }
 }
 </script>
 
<style scoped>
*{
    box-sizing: content-box;
}
.hh{
    display: none;
}
.upp .price-up{
    border-bottom-color: #B10000
}
.downp .price-down{
    border-top-color: #B10000
}
.zonghe .red{
    color: #950b00
}
.xiaospyulan{
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -152px;
    top: -10px;
    border: 1px solid #ccc;
    background: #fff;
    width: 150px;
}
.xiaospyulan:hover{
    display: block
}
.syspulwrap .xiaospyulan li{
    display: block;
    width: 100%;
    padding: 0;
}
.syspulwrap .xiaospyulan li:hover{
    background: rgba(221, 219, 219, 0.884);
}
.xiaospyulan a{
    display: block;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 a{
       font-size: 12px;
   }
.gjz{
    padding-left: 10px;
}
.shangpinlist{
    width: 790px;
}
     .shangpinlist-wrap{
        width: 1000px;
        margin: 0 auto;
    }
    .navlist{
        width: 190px;
    }
    .bdsousuo{
        margin: 0;
        background: #fff;
        margin-bottom: 10px;
    }
    .titles{
        margin: 0;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        color: #fff;
        background: #000;
        font-size: 18px;
    }
    .jgsousuo-wrap{
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 2px 2px;
        padding-top: 10px;
    }
    .jgsousuo-wrap li{
        line-height: 22px;
        color: #666;
        width: 195px;
        margin-top: 10px;
    }
    .jgsousuo-wrap li:first-child{
        margin-top: 0;
    }
    .key{
        display: block;
        margin-right: 4px;
        max-width: 50px;
        text-align: right;
    }
    .keyword{
        width: 110px;
        display: inline-block;
        border: 1px solid #a7a6aa;
        line-height: 22px;
        height: 22px;
        border-radius: 2px;
        text-indent: 5px;
    }
    .pri{
        border-radius: 2px;
        background: url("../assets/img/ys/6.png") no-repeat 9999px 9999px;
        background-position: -107px -94px;
        background-color: #fff;
        height: 20px;
        line-height: 20px;
        text-indent: 0;
        padding-left: 12px;
        margin-right: 4px;
        display: block;
        float: left;
        width: 47px;
        border: 1px solid #a7a6aa;
    }
    .lianjies{
        color: #999;
        font-weight: 700;
        display: block;
        margin-right: 4px;
    }
    .pri-submit{
        margin-left:65px;
        margin-top: 10px;
        background-image: -webkit-gradient(linear,0 0,0 bottom,from(#333),to(#000));
        border-radius: 2px;
        height: 22px;
        line-height: 22px;
        float: left;
        margin-bottom: 20px;
    }
    .pri-btn{
        cursor: pointer;
        border: none;
        display: inline-block;
        width: 60px;
        padding: 0 10px;
        background: url("../assets/img/ys/7.png") no-repeat 50% 0;
        height: 24px;
        overflow: hidden;
        color: transparent;
        outline: none;
    }
    .fenlei{
        margin-bottom: 10px;
    }
    .chakansuoyou{
        width: 100%;
        border-bottom: 1px solid #B7B7B7;
        padding-left: 10px;
        height: 35px;
    }
    .chakansuoyou a{
        line-height: 35px;
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }
    .chakansuoyou a:hover{
        color: #c00;
        text-decoration: underline;
    }
    .fenleinav{
        padding-left: 15px;
        border-bottom: 1px solid #E5E5E5;
    }
    .fenleinav li{
        float: left;
        margin-right: 5px;
    }
    .fenleinav li a{
        color: #666;
        line-height: 35px;
    }
    .fenleinav li a:hover{
        color: #c00;
        text-decoration: underline;
    }
    .paihanglist{
        border: 1px solid #e5e5e5;
    }
    .pl-ul{
        padding-left: 0;
    }
    .pl-ul li{
        float: left;
        width: 50%;
        height: 26px;
        line-height: 26px;
        background: #E5E5E5;
        text-align: center;
    }
    .pl-ul li.active{
        background: #fff;
    }
    .xiaow{
        border-bottom: 1px dotted #ebebeb;
        padding: 15px 10px 4px;
    }
    .xw-l{
        margin-top: 5px;
        margin-left: 5px;
    }
    .spimg{
        width: 42px;
        height: 42px;
    }
    .xw-r{
        width: 113px;
        
    }
    .xw-r p{
        width:113px;
        min-height: 16px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .spname{
        color: #666;
        font-size: 14px;
    }
    .xw-r .spname:hover{
       text-decoration: underline;
    }
    .shprice{
        font-family: arial,verdana,sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        color: #c00;
    }
    .sale{
        color: #999;
    }
    .scshu{
            color: #c97;
        font-weight: 700;
    }
    .tjnav-wrap{
        height: 30px;
    }
    .tjnavw{
        margin: 0 auto;
        line-height: 30px;
        position: relative;
        background: #f9f9f9;
        border: 1px solid #E6E2E1;
        box-sizing: content-box;
    }
    .tjnav{
        margin-left: 25px;
    }
    .tjnav-ul li{
        float: left;
        padding-left: 9px;
        color: #666;
    }
    .syfl{
        display: inline-block;
        max-width: 9.25em;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-weight: 700;
        color: #666;
    }
    .tjnav a:hover{
        color: #c00000;
        text-decoration: underline;
    }
    .suoyoufenlei i{
        color: #666;
        margin-left: 3px;
        font-style: normal;
        font-family: \5b8b\4f53;
        vertical-align: middle;
        margin-top: 2px;
        display: inline-block;
    }
    .suoyoushangpin-wrap{
        margin-top: 4px;
        position: relative;
    }
    .suoyoushangpin-wrap:hover .suoyousplist-wrap{
        display: block;
    }
    .sysp{
        position: absolute;
        z-index: 201;
        display: inline-block;
        overflow: hidden;
        max-width: 9.25em;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        border: 1px solid #f9f9f9;
        border-radius: 2px 2px 0 0;
        margin-top: -3px;
        font-weight: 700;
        padding-left: 5px;
        padding-right: 15px;
        color: #666;
        
    }
    .sysp i{
            position: absolute;
            right: 6px;
            top: 15px;
            width: 0;
            height: 0;
            border-width: 3px;
            border-style: solid dashed dashed;
            border-color: #666 transparent transparent;
            font-size: 0;
            line-height: 0;
    }
    .suoyoushangpin-wrap:hover .sysp i{
        transform: rotate(180deg);
        transform-origin: center 1px;
    }
    .suoyousplist-wrap{
        display: none;
        position: absolute;
        padding-top: 10px;
        padding-bottom: 5px;
        background-color: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 0 2px 2px;
        box-shadow: 1px 2px 3px #ededed;
        margin-top: -1px;
        left: 0;
        top: 27px;
        z-index: 200;
        width: 139px;
        height: 139px;
    }
    .suoyousplist-wrap>ul{
        position: absolute;
    }
    .suoyousplist-wrap>ul:first-child{
        left: 0;
    }
    .suoyousplist-wrap>ul:nth-child(2){
        left:139px; 
    }
    .suoyousplist-wrap>ul:nth-child(3){
        left: 278px;
    }
    .syspulwrap{
        float: left;
        border-right: 1px dashed #d5d5d5;
        margin-left: -1px;
        margin-bottom: 15px;
        min-height: 132px;
        width: 139px;
        padding-left: 0;
    }
    .suoyousplist-wrap .syspulwrap>li{
       width: 100%;
       padding-left: 0;
       text-align: center;
        display: block;
    }
    .suoyousplist-wrap .syspulwrap>li:hover{
      background:   rgba(221, 219, 219, 0.884);
    }
    .suoyousplist-wrap .syspulwrap>li:hover .xiaospyulan{
      display: block;
    }
    /* .suoyousplist-wrap .syspulwrap>li.actives{
        background:   rgba(221, 219, 219, 0.884);
    }
    .suoyousplist-wrap .syspulwrap>li.actives a{
        color: #c00000;
        text-decoration: underline;
    } */
    .daoyhanglist{
        display: block;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        text-indent: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 107px;
    }
    .suoyoushangpin-wrap:hover .sysp{
        border-color: #dbdbdb;
        border-bottom:1px solid #f9f9f9;
        text-decoration: underline;
        color: #c00;
        background: #fff;
    }
    .suoyoushangpin>i{
        color: #666;
        margin-left: 3px;
        font-style: normal;
        font-family: \5b8b\4f53;
        vertical-align: middle;
        margin-top: 2px;
        display: inline-block;
    }
    .tjsearch-wrap{
        margin-left:5px;
        border: 1px solid #ccc;
        border-radius: 10px;
        line-height: 0;
        padding: 0 10px;
        margin-top: 6px;
        position: relative;
    }
    .tjsearch{
        text-indent: 10px;
        height: 25px;
        border: none;
        outline: none;
    }
    .tjsearch-btn{
        cursor: pointer;
        position: absolute;
        display: inline-block;
        width: 18px;
        height: 16px;
        right: 2px;
        top: 50%;
        margin-top: -9px;
        background: url("../assets/img/ys/8.png")
    }
    .tjresou{
        margin: 5px;
    }
    .tjresou span{
        font-size: 12px;
    }
    .tjresou a{
        display: inline-block;
        border-right: 1px solid #ccc;
        margin-left: -1px;
        padding: 0 12px;
        line-height: 1.1;
        white-space: nowrap;
        font-size: 12px;
        color: #999;
    }
    .lingwainav-wrap{
        width: 100%;
        border: 1px solid #D1CCC7; 
    }
    .lingwainav{
        box-sizing: content-box;
        padding-left: 35px;
        margin: 5px 0;
    }
    .zonglan{
        font-size: 14px;
        color: #404040;
    }
    .zonglan-a{
        color: #999;
        font-size: 14px;
        display: inline-block;
        margin-left: 10px;
    }
    .pingpai{
        border-top:1px dashed #d5d5d5;
        border-bottom:1px dashed #d5d5d5;
        width: 100%;
        height: 30px;
        line-height: 30px;
       text-indent: 35px;
    }
    .pinpais{
        font-size: 14px;
        color: #404040;
    }
    .pinpai-a{
        color: #999;
        font-size: 14px;
        display: inline-block;
        margin-left: 10px;
    }
    .shangpuinfos-wrap{
        width: 100%;
        padding: 5px 35px;
    }
    .xingxiss{
        width: 400px;
        text-indent: 1.5em;
    }
    .shangpuinfos{
        font-size: 12px;
        color: #666;
        width: 400px;
        word-wrap: break-word; 
        word-break: normal; 
    }
    .dianpuxinxis{
        color: #666;
        font-size: 14px;
        font-weight: 700;
    }
    .zonghenav-wrap{
        margin-top: 20px;
        background: #faf9f9;
        color: #806f66;
        padding: 5px;
        margin-bottom: 10px;
    }
    .zonghe{
        border: 1px solid #CCCCCC;
        height: 24px;
        line-height: 24px;
        box-sizing: content-box;
    }
    .zonghe-a{
        padding: 0 15px 0 5px;
        color: #806f66;
        display: inline-block;
        border-right: 1px solid #ccc;
        font-size: 12px;
        color: #806f66;
        position: relative;
    }
    .zonghe-as{
        padding: 0 15px 0 5px;
        color: #806f66;
        display: inline-block;
        border-right: 1px solid #ccc;
        font-size: 12px;
        color: #806f66;
        position: relative;
    }
    .zonghe .active{
        color: #B10000;
    }
    .zonghe .active .xiaoliang-is{
        background-position: -30px -23px;
    }
    .zonghe-a:hover{
        color: #B10000;
    }
    .zonghe-a:last-child{
        border-right: none;
    }
    .xiaoliang-is{
        position: absolute;
        top: 8px;
        right: 5px;
        width: 7px;
        height: 10px;
        line-height: 10px;
        display: inline-block;
        overflow: hidden;
        background: url("../assets/img/ys/10.png") no-repeat 9999px 9999px;
        background-position: -22px -23px;
    }
    .xiaoliang:hover .xiaoliang-i{
        background-position: -30px -23px;
    }
    .xinpings:hover .xinping-i{
        background-position: -30px -23px;
    }
    .shoucangs:hover .shoucang-i{
        background-position: -30px -23px;
    }
    .price-up{
        position: absolute;
        display: inline-block;
        line-height: 10px;
        right: 5px;
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-bottom: 4px solid #806F66;
        top: 3px;
    }
    .price-down{
        position: absolute;
        display: inline-block;
        line-height: 10px;
        right: 5px;
        height: 0;
        width: 0;
        border: 4px solid transparent;
        border-top: 4px solid #806F66;
        top: 13px;
    }
    .price-chaxun{
        float: left;
        margin-left: 20px;
        position: relative;
    }
    .fb-item{
        position: relative;
        font-weight: 400;
    }
    .pricei{
        width: 12px;
        height: 22px;
        line-height: 22px;
        left: 4px;
        top: 2px;
        position: absolute;
        display: inline-block;
        color: #666;
        font-size: 12px;
        font-style: normal;
        font-family: arial,verdana,sans-serif!important;
    }
    .jginput{
        display: block;
        float: left;
        width: 45px;
        height: 22px;
        line-height: 22px;
        text-indent: 12px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    .jiange{
        position: static;
        background: url("../assets/img/ys/10.png") no-repeat 9999px 9999px;
        background-position: -78px -106px;
        display: block;
        float: left;
        width: 8px;
        height: 24px;
        line-height: 24px;
    }
    .qkqr{
        display: none;
        width: 102px;
        height: 24px;
        padding: 5px;
        text-align: center;
        position: absolute;
        top: 29px;
        left: 0;
        /* background-color: #EFECEB; */
        z-index: 2;
    }
    .cbtn{
        margin-right: 3px;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        padding: 0 10px;
        background-color: #EFECEB;
        border: 1px solid #ccc;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        font-family: \5b8b\4f53;
        border-radius: 2px;
        color: #333;
    }
    .qrbtn{
        margin-right: 3px;
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 0 10px;
        background-color: #950b00;
        /* border: 1px solid #ccc; */
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        font-family: \5b8b\4f53;
        border-radius: 2px;
        color: #fff;
    }
    .tjnav-ul{
        margin-top: 0;
        margin-bottom: 0;
    }
</style>
